<template>
  

            <!-- 搜索按钮 -->
  
  <div class="row">
    <div class="col-md-6 mx-auto">
      <div class="input-group">
        <input
          type="text"
          class="form-control input-sm"
          placeholder=""
          value=""
          v-model="keyWord"
        />
        <span class="input-group-btn">
          <div
            class=""
            @click="searchAppt()"
            type="button"
          >&nbsp;&nbsp;
            <button class="btn btn-danger" aria-hidden="true"  >搜索</button
            >
          </div>
        </span>
      </div>
    </div>
  </div>
<br>
          <!-- </form>
        </div>
      </div>
    </nav> -->

    <br />

    <!-- 表格 -->
    <table class="table">
      <thead>
        <tr>
          <th>序号</th>
          <th>用户名</th>
          <th>球桌</th>
        
          <th>预约桌名</th>
          <th>预约时间</th>
          
          <th>预约时长</th>
          <th>备注</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="ara in appts" :key="ara.id">
          <!-- //插值 插的是后端得到的属性，和数据库表里对应-->
          <td>{{ ara.id }}</td>
<td>{{ ara.username}}</td>
          <td>
            <img
              :src="ara.image"
              alt="球桌图片"
              :style="{ width: '80px', height: '80px' }"
            />
          </td>
          <td>{{ ara.ballname }}</td>
          <td>{{ ara.appt_time }}</td>
          <td>{{ ara.balltime }}</td>
          <td>{{ ara.memo }}</td>
          <td style="width: 200px">
            <button type="button" @click="addAppt()" class="btn btn-success">
              增加
            </button>
            <button
              type="button"
              class="btn btn-success"
              @click="editAppt(ara)"
            >
              编辑
            </button>
            <button
              type="button"
              class="btn btn-success"
              @click="deleteAppt(ara.id)"
            >
              删除
            </button>
          </td>
        </tr>
      </tbody>
    </table>

</template>

<script>
// 安装axios来传后端数据
// npm install axios --save
//导入axios，用它
import { http } from "../../utils/http.js";

// 表格里的数据
export default {
  data() {
    return {
      appts: [],
      keyWord: "",
    };
  },

  created() {
    http
      .request("/getBallApptList")
      .then((res) => {
        if (res.data) {
          this.appts = res.data;
          console.log(res);
        }
      })
      .catch((error) => {
        // 处理请求错误
        console.error(error);
      });
  },
  methods: {
    //点击增加时候跳转
    addAppt() {
      this.$router.push("/addAppt");
    },
   

    searchAppt() {
      // /搜索方法

      http.get("/getBallApptusername?username=" + this.keyWord).then((res) => {
        console.log(this.keyWord);
        this.appts = res.data;
      });
    },

    editAppt(ara) {
      this.$router.push({
        path: "/editAppt",
        // 把参数带到编辑页面
        query: {
          //将数据格式化一下 JSON.stringify
          apptInfo: JSON.stringify(ara),
        },
      });
    },

    deleteAppt(id) {
      //后端传id
      http.get("/deleteBallAppt?id=" + id).then((res) => {
        // console.log(res)
        if (res.status === 200) {
          alert("删除成功");
        } else {
          alert("删除失败");
        }
        // 页面刷新
        this.$router.go(0);
      });
    },
  },
};
</script>

<style scoped>
</style>